<template>
  <div class="background-white mess-list">
    <el-radio-group v-model="tabPosition">
      <el-radio-button label="top">系统通知</el-radio-button>
      <el-radio-button label="right">公告消息</el-radio-button>
    </el-radio-group>
    <div style="margin-top: 16px">
      <el-table
        ref="multipleTable"
        :data="messData"
        tooltip-effect="dark"
        style="width: 100%;"
        :cell-style="{height:49+'px'}"
        :header-cell-style="{background:'#F3F4F7',color:'#999999'}"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column

          label="标题内容"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              <img :src="red_hot" height="8" width="8" v-if="!scope.row.isRead"/>
              <span style="margin-left: 24px;color: #999999 " v-if="scope.row.isRead"> {{ scope.row.content }}</span>
              <span style="margin-left: 24px;color: #333333" v-if="!scope.row.isRead"> {{ scope.row.content }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="提交时间"
          width="200">
          <template slot-scope="scope"><span style="font-size: 14px;color: #999999">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px;display: flex;flex-direction: row;justify-content: space-between"
           v-if="messData.length>0">
        <div>
          <el-checkbox v-model="checked" @change="allCheckboxAction"></el-checkbox>
          <el-button style="margin-left:37px " :disabled="multipleSelection.length>0?false:true"
                     @click="selectDelete(multipleSelection)">删除
          </el-button>
          <el-button :disabled="multipleSelection.length>0?false:true" @click="readSelete(multipleSelection)">标记已读
          </el-button>
          <el-button :disabled="multipleSelection.length>0?false:true" @click="readAll(messData)">全部已读</el-button>
          <el-button :disabled="multipleSelection.length>0?false:true" @click="deleteAll">全部删除</el-button>
        </div>
        <div>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import red_hot from '~/assets/img/red_hot.png'

  export default {
    layout: 'frame',
    name: "index",

    data() {
      return {
        tabPosition: 'top',
        red_hot: red_hot,
        messData: [{
          date: '2016-05-03 10：09：12',
          content: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 1,
          date: '2016-05-03 10：09：12',
          content: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
          isRead: false
        }, {
          id: 2,
          date: '2016-05-03 10：09：12',
          content: '上海市普陀区金沙江路 1518 弄',
          isRead: true
        }, {
          id: 3,
          date: '2016-05-03 10：09：12',
          content: '上海市普陀区金沙江路 1518 弄',
          isRead: true
        }, {
          id: 4,
          date: '2016-05-03 10：09：12',
          content: '上海市普陀区金沙江路 1518 弄'
          , isRead: true
        }, {
          id: 5,
          date: '2016-05-03 10：09：12',
          content: '上海市普陀区金沙江路 1518 弄',
          isRead: false
        }, {
          id: 6,
          date: '2016-05-03 10：09：12',
          content: '上海市普陀区金沙江路 1518 弄',
          isRead: true
        }],
        multipleSelection: []
      }
    },
    created() {
      this.SetIsShowBread(true);  //设置面包屑导航是否显示

      //面包屑显示后内容
      if (this.isShowBread) {
        this.SetCurrentPath({url: '/', title: '消息列表'});
      }
    },
    computed: {
      //控制是否显示导航
      ...mapState({
        isShowBread: state => state.filter.isShowBread
      }),

      //底部全选
      checked() {

        let currentLength = this.multipleSelection.length;
        let initDataLength = this.messData.length

        return (currentLength != 0 && initDataLength != 0) && (currentLength == initDataLength) ? true : false;
      }

    },
    methods: {
      ...mapMutations('filter', [
        'SetIsShowBread', 'SetCurrentPath'
      ]),

      //底部全选切换
      allCheckboxAction(v) {
        if (v) {//全选
          this.$nextTick(() => {
            for (let i = 0; i < this.messData.length; i++) {
              this.$refs.multipleTable.toggleRowSelection(
                this.messData[i],
                true
              );
            }
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

      //标记已读
      readSelete(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.messData.forEach((initRow, index) => {
              if (row.id == initRow.id && (!row.isRead)) {
                this.messData[index].isRead = true;
                this.$refs.multipleTable.toggleRowSelection(row, false);
              }
            })
          });
        }
      },
      //全部已读
      readAll(messData) {
        messData.forEach((initRow, index) => {
          if ((!initRow.isRead)) {
            this.multipleSelection.push(initRow)
            this.messData[index].isRead = true;
          }
        })
      },
      //批量删除
      selectDelete(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.messData.forEach((initRow, index) => {
              if (row.id == initRow.id) {
                this.messData.splice(index, 1);

              }
            })
          });
        }
      },
      //全部删除
      deleteAll() {
        this.messData = [];
      },
      //总操作数据源
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val;
      }
    },

  }
</script>

<style lang="scss">

</style>
